<template>
  <div :class="className" :id="id" :style="{ height: height, width: width }"></div>
</template>

<script>
  // ymc-柱状图
  import echarts from 'echarts'
  import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart',
      },
      //主题颜色
      themStyleColor: {
        type: String,
        default: '',
      },
      //控制y轴方向
      inverse:{
        type: Boolean,
        default: false,
      },
      id: {
        type: String,
        default: 'chart',
      },
      width: {
        type: String,
        default: '200px',
      },
      height: {
        type: String,
        default: '200px',
      },
    },
    data() {
      return {
        chart: null,
      }
    },
    mounted() {
      this.initChart()
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      legendselectchangedEv(pames) {
        let {
          name
        } = pames
        let _option = this.chart.getOption()
        let {
          legend
        } = _option
        let _legendData = {}
        if (Array.isArray(legend) && legend.length > 0) {
          _legendData = legend[0].data
        }
        let textShadStyle = {
          backgroundColor: '#eee',
          shadowBlur: 0.5,
          shadowColor: this.themStyleColor,
          shadowOffsetY: 20,
        }
        for (let i = 0; i < _legendData.length; i++) {
          if (name === _legendData[i].name) {
            _legendData[i].textStyle = {
              ..._legendData[i].textStyle,
              ...textShadStyle,
            }
          } else {
             let textNormalStyle = {
          color: this.themStyleColor,
          fontSize: 16,
          height: 3,
          rich: {},
        }
            _legendData[i].textStyle = textNormalStyle
          }
        }
        console.log('生成legend', _legendData)
        this.chart.setOption({
          legend: {
            data: _legendData,
          },
        })
      },
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id))
        // let themStyleColor = '#52CCA1'
        // #52CCA1 #0B7CC0
        let textShadStyle = {
          backgroundColor: '#eee',
          shadowBlur: 0.5,
          shadowColor: this.themStyleColor,
          shadowOffsetY: 20,
        }
        let textNormalStyle = {
          color: this.themStyleColor,
          fontSize: 16,
          height: 3,
          rich: {},
        }

        var option = {
          color: this.themStyleColor,
          grid: {
            left: '5%',
            //   top:'50%',
          },
          //图列配置项
          legend: {
            selectedMode: 'single',
            left: 'left',

            data: [{
                name: '日',
                icon: 'none',
                textStyle: {
                  ...textNormalStyle,
                  ...textShadStyle,
                },
              },
              {
                name: '周',
                icon: 'none',
                textStyle: textNormalStyle,
              },
              {
                name: '月',
                icon: 'none',
                textStyle: textNormalStyle,
              },
            ],
            // align:'left',
          },
          xAxis: {
            position: this.inverse?'top':'bottom',
            // data: [1, 2, 3, 4],
          },
          yAxis: {
            inverse: this.inverse,
            // data: [1, 2, 3, 4],
          },
          series: [{
              name: '日',
              type: 'bar',
              label: {
                show: true,
                formatter: '{a}{@[x]}',
              },
              data: [1, 2, 3, 8],
            },
            {
              name: '周',
              type: 'bar',
              label: {
                show: true,
                formatter: '{a}{@[x]}',
              },
              data: [1, 2, 3, 7],
            },
            {
              name: '月',
              type: 'bar',
              label: {
                show: true,
                formatter: '{a}{@[x]}',
              },
              data: [1, 2, 3, 10],
            },
          ],
        }
        option[this.inverse?'yAxis':'xAxis'].data=[1, 2, 3, 4];
        this.chart.setOption(option)
        this.chart.on('legendselectchanged', this.legendselectchangedEv)
      },
    },
  }

</script>
